<template>
  <div class="searchedCreatorBox">
    <div class="total">
      共
      <span>{{ total }}</span>
      位创作人
    </div>
    <div class="searchedCreators">
      <SearchedCreatorItem
        v-for="searchedCreator in searchedCreators"
        :key="searchedCreator.id"
        :userinfo="searchedCreator"
      />
    </div>
  </div>
</template>

<script>
import SearchedCreatorItem from "@/components/SearchedCreatorItem.vue";

export default {
  components: {
    SearchedCreatorItem,
  },
  data() {
    return {
      searchedCreators: null,
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(
          `https://apis.netstart.cn/xpc/search?type=creator&kw=${this.$route.query.kw}`
        )
        .then((res) => {
          // console.log(res.data.data);
          this.total = res.data.data.total;
          this.searchedCreators = res.data.data.list;
          this.$toast.clear();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchedCreatorBox {
  margin-top: 45px;
  padding: 0 15px;

  .total {
    font-size: 13px;
    color: #999;

    span {
      color: red;
      font-weight: bold;
    }
  }
}
</style>
